<template>
  <div
    @mousedown="down"
    @touchstart="down"
    @mousemove="move"
    @touchmove="move"
    @mouseup="end"
    @touchend="end"
  >
    <router-link
      id="moveDiv"
      :to="url"
      tag="div"
      class="fixed_btn"
    >
      <!-- {{data[0]}}<br>{{data[1]}} -->
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: { left: 0, top: 0 },
      nx: '',
      ny: '',
      dx: '',
      dy: '',
      xPum: '',
      yPum: '',
      flags: false
    };
  },
  props: {
    data: {
      type: Array,
      defalut: []
    },
    url: {
      type: String,
      default: ''
    }
  },
  methods: {
    down() {
      this.flags = true;
      var moveDiv = document.getElementById('moveDiv');
      var touch;
      if (event.touches) {
        touch = event.touches[0];
      } else {
        touch = event;
      }
      this.position.left = touch.clientX;
      this.position.top = touch.clientY;
      this.dx = moveDiv.offsetLeft;
      this.dy = moveDiv.offsetTop;
    },
    move() {
      if (this.flags) {
        var touch;
        var moveDiv = document.getElementById('moveDiv');
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        this.nx = touch.clientX - this.position.left;
        this.ny = touch.clientY - this.position.top;
        this.xPum = this.dx + this.nx;
        this.yPum = this.dy + this.ny;
        if (this.xPum < 0) {
          this.xPum = 0;
        }
        if (this.yPum < 0) {
          this.yPum = 0;
        }
        const maxLeft = document.body.clientWidth - moveDiv.clientWidth;
        const maxTop =
          document.documentElement.clientHeight - moveDiv.clientHeight;
        if (this.xPum > maxLeft) {
          this.xPum = maxLeft;
        }
        if (this.yPum > maxTop) {
          this.yPum = maxTop;
        }
        moveDiv.style.left = this.xPum + 'px';
        moveDiv.style.top = this.yPum + 'px';
        // 阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
        document.addEventListener(
          'touchmove',
          function() {
            event.preventDefault();
          },
          false
        );
      }
    },
    // 鼠标释放时候的函数
    end() {
      this.flags = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.fixed_btn {
  width: 120px;
  height: 124px;
  // border-radius: 50%;
  // background-color: rgba(56, 137, 255, 0.7);
  position: fixed;
  right: 26px;
  bottom: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  @include sc(26px, #fff);
  @include bis($imgPath + 'coin/wdhd.png');
}
</style>
